<template>
  <div id="HomeTabs">
    <van-tabs v-model:active="active" sticky offset-top="12.2666666vw">
      <van-tab :title="item.name" v-for="item in channels" :key="item.id" :name="item.name">
        <HomeArtItem :channel_id="item.id" />
      </van-tab>
      <template #nav-right>
        <van-icon name="plus" class="editChannel" @click="changeOverlay" />
      </template>
    </van-tabs>
    <home-channel-manage ref="channelManageRef" />
  </div>
</template>

<script  setup>
import { Tab as vanTab, Tabs as vanTabs, Icon as vanIcon } from 'vant'
import HomeArtItem from '@/components/HomeArtItem.vue'
import HomeChannelManage from '@/components/HomeChannelManage.vue'
import { ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const active = ref(0)
// tab
const channels = ref(null)
store.dispatch('getChannel')
watchEffect(() => {
  channels.value = store.state.channel.userChannel
  active.value = store.state.channel.activeId
})

// channel manage组件
const channelManageRef = ref()
const changeOverlay = () => {
  channelManageRef.value.popupShow = true
}
</script>

<style lang='less' scoped>
/deep/ .van-tabs__nav {
  padding-right: 40px;
}
.editChannel {
  height: 44px;
  line-height: 44px;
  width: 44px;
  text-align: center;
  position: fixed;
  top: 46px;
  right: 0;
  font-size: 16px;
  background-color: #fff;
  z-index: 999;
}
</style>
